<template>
  <div class="addLtsMessage">
    <el-dialog :title="title" :closeOnClickModal="false" :visible.sync="show" width="650px">
      <el-form label-position="right" :model="selectTable" ref="addForm" label-width="80px" :inline="false" autocomplete="off">
        <el-row>
          <el-col>
            <el-form-item label="标题" prop="title" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.title" maxLength="20"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="推送用户" :rules="[rule[0]]">
          <el-radio v-model="userType" label="1">按用户类型推送</el-radio>
          <el-radio v-model="userType" label="2">指定用户推送</el-radio>
        </el-form-item>
        <el-form-item v-if="userType === '1'">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="-1">全部</el-checkbox>
            <el-checkbox label="0">普通用户</el-checkbox>
            <el-checkbox label="3">理投达人</el-checkbox>
            <el-checkbox label="1">理投专家</el-checkbox>
            <el-checkbox label="2">理投机构</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="userType === '2'">
          <el-select class="searchInput" v-model="receiveUserId" multiple filterable remote reserve-keyword placeholder="请输入用户名或手机号" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="(item, index) in userList" :key="index" :label="item.userName+'('+item.phoneNum+')'" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" :rules="[rule[0]]" prop="content">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" v-model="selectTable.content">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-loading="pload">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="addLtsMessage()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from '@/utils/api'
export default {
  data () {
    return {
      pload: false,
      userType: '1',
      loading: false,
      userList: [],
      receiveUserId: [],
      checkList: [],
      rule: [
        { required: true, message: '必填项', trigger: 'change' }
      ],
      show: true,
      selectTable: {}
    }
  },
  props: {
    data: Object
  },
  created () {
    this.selectTable = this.JSONs(this.data)
  },
  watch: {
    show (newVal) {
      this.$parent.edit = false
    }
  },
  computed: {
    title () {
      if (this.selectTable.method === 'edit') {
        return '修改'
      } else if (this.selectTable.method === 'add') {
        return '添加'
      }
    }
  },
  methods: {
    async addLtsMessage () {
      await this.$refs['addForm'].validate()
      try {
        if (!this.checkList.length && !this.receiveUserId.length) {
          this.$notify({ title: '请选择推送用户', type: 'error', duration: 3000 })
          return false
        }
        if (this.userType === '1') {

          this.selectTable.receiveUserType = this.checkList.join(',')
        } else if (this.userType === '2') {
          this.selectTable['receiveUserId'] = this.receiveUserId.join(',')
        }
        await api.addLtsMessage({ ...this.selectTable })
        this.$emit('getData')
        this.$parent.edit = false
        this.checkList = []
        this.receiveUserId = []
        this.$notify({ title: '操作成功', type: 'success', duration: 3000 })
      } catch (e) {
        console.log(e)
      }
    },
    async getLtsMessageByNameOrPhone (val) {
      if (!val) {
        return false
      }
      let res = await api.getLtsMessageByNameOrPhone({
        keyword: val
      })
      this.userList = res.data
    },
    remoteMethod (val) {
      if (val !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.getLtsMessageByNameOrPhone(val)
        }, 200);
      } else {
        this.userList = [];
      }
      console.log(val)
    }
  }
}
</script>
<style lang="scss">
.addLtsMessage {
  .searchInput{
    width: 100%;
  }
  .searchInput .el-input__inner {
    cursor: text !important;
  }
}
</style>
